<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<link rel="stylesheet" type="text/css" href="<c:url value='/wangEditor/dist/css/wangEditor.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/checkboxcss/inserthtml.com.radios.css'/>" />
<script src="<c:url value='/js/taskDetail.js'/>" type="text/javascript" charset="utf-8"></script>
<!-- 批改情况  -->
<div class="correct-info">
	<!-- 得分 -->
	<div class="col-md-4">
		<div class="form-inline">
			<label>得分</label>
			<span id="teacher-score" style="font-size:1.8rem;margin-left:2rem;"></span>
		</div>
	</div>
	<!-- 评语 -->
	<div class="col-md-12" id="teacher-comment-box">
		<label>评语</label>
		<div id="teacher-comment">
			
		</div>
		<hr>
	</div>
</div>

<div class="task-info">
	
	<!-- 任务名称   && 任务类型 -->
	<div class="col-md-12 task-name-type">
		<label>任务名称</label>
		<span id="title"></span>&ensp;<span id="type"></span>
		<hr>
	</div>
	<!-- 任务提交状态 -->
	<div class="col-md-12" id="status-box">
		<label class="task-submit-read-status">状态</label>
		<div id="taskStatus"></div>
	</div>
	<!-- 如果答案【未批改】-->
	<div class="col-md-12" id="no-correct">
		<div id="have-comment">暂未批改</div>
	</div>
	<!-- 答案是否公布  -->
	<div class="col-md-12" id="answer-status-box">
		<hr>
		<div id="answer-is-visible"></div>
	</div>
	<!-- 任务截止时间 -->
	<div class="col-md-12" id="deadline-box">
		<label>任务截止时间</label>
		<div id="deadline"></div>
	</div>
	<!-- 任务描述 -->
	<div class="col-md-12">
		<label>任务描述</label>
		<div id="description"></div>
	</div>
	<!-- 任务附件 -->
	<div class="col-md-12">
		<label>任务附件</label>
		<div class="class-task-list-stu">
			<ul id="attachList">
				
			</ul>
		</div>
		<hr>
	</div>
	
</div>

<!-- 提交情况  ## 如果答案 【已批改】，则 {隐藏} “上传附件” “提交”按钮 ， “任务答案内容为不可编辑” -->

<div class="submit-info">
	
	<!-- 提示 -->
	<div id="inform-in-detail" class="col-md-12">
		<label class="infor">(请尽量以附件形式提交图片或文件)</label>
		<label class="infor">(附件可以包含多个文件)</label>
		<label class="infor">(刷新页面即可取消重传附件)</label>
	</div>
	<!-- 答案附件 -->
	<div class="col-md-12">
		<label>我的答案附件</label>
		<input type="button" id="up-file-btn" class="btn btn-primary"  value="上传答案附件">
		<input type="file" name="file" id="task-stu-submit" onchange="taskFileListSubmit()" style="display:none;">
		<div class="class-answer-list-stu-submit">
			<ul id="stu-submit-file-list">
				
			</ul>
		</div>
		<hr>
	</div>
	<!-- 任务答案 -->
	<div class="col-md-12" id="my-answer">
		<label>我的答案</label>
		<div id="submitDetail">
		
		</div>
	</div>
	
</div>

<!-- 标准答案 -->
<div id="answer-box">
	<div class="col-md-12" id="standard-answer">
		<label>标准答案</label>
		<div id="standardAnswer"></div>
	</div>
	<div class="col-md-12">
		<label>标准答案附件</label>
		<div class="class-answer-list-stu">
			<ul id="answerAttachList">
				
			</ul>
		</div>
	</div>
</div>

<!-- 提示无法提交原因  -->
<div class="col-md-12"  style="text-align:center;">
	<div id="canntSubmit"></div>
</div>
<div class="col-md-12" style="text-align:center;margin-top:2rem;">
	<input type="button" class="btn btn-primary" id="return" value="返回" >
	<input type="button" class="btn btn-primary" id="task-submit-btn" value="提交" >
	<div style="height: 100px"></div>
</div>
<input type="hidden" id="idKey">
<script src="<c:url value='/wangEditor/dist/js/wangEditor.js'/>" type="text/javascript" charset="utf-8"></script>


<script>
var keylist;
// var downUrl;
$(function(){
	$("#task-submit-btn").click(submitTaskAnswer);
	$("#answer-box").hide();
	$("#up-file-btn").click(upFile);
});

function initEdit() {
	$("#edit-answer").hide();
	var editorTaskSubmit = new wangEditor('submitDetail');
	editorTaskSubmit.config.menus = [
	    'fullscreen',' | ','bold','underline','italic','strikethrough','eraser',
		'forecolor','bgcolor','quote','fontfamily','fontsize','head','unorderlist',
		'orderlist','alignleft','aligncenter','alignright','link','unlink','table',
		'img','video','insertcode','undo','redo'
    ];
	editorTaskSubmit.config.uploadImgUrl = CONTEXT_PATH + 'resource/editUpload';
	editorTaskSubmit.config.uploadImgFileName = "editor-task";
	editorTaskSubmit.config.zindex = 20000;
	editorTaskSubmit.create();
	$('#submitDetail').attr('style','height:auto;');
}

//点击重新上传附件，删除已有的文件
var upFile = function() {
	var content = $('input[id="up-file-btn"]').val();
	if(content == "重新上传附件"){
		//TODO:-添加删除服务器端文件的代码
		$("#stu-submit-file-list").html("");
	}
	$('#task-stu-submit').click();	
}


var submitTaskAnswer = function() {
	var stuAnswer = $('#submitDetail').html();
	
	var answerAttachName=$("#stu-submit-file-list input[name='answerAttachName']");
	var answerAttachKey=$("#stu-submit-file-list input[name='answerAttachKey']");
	var answerAttachFiles=[];
	
	for(var i=0;i<answerAttachName.length;i++){
		var item={
			name: answerAttachName[i].value,
			url: answerAttachKey[i].value
		};
		answerAttachFiles.push(item);
	}
	var id = $("#idKey").val();
	var json = {
		id:id,
		detail:stuAnswer,
		resultAttachment:{
			files:answerAttachFiles
		}
	}
	// downUrl = json.resultAttachment.files[0].url;
	// console.log(json)
	var url = "";
	url=CONTEXT_PATH+"taskSubmitResult/submit";
	$.post(url, {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){

			alert("提交成功！");
			location.reload();
		}else{

			alert(data.message);
			// console.log(data)
			location.reload();
		}
	});

}

var getTaskMainDetail = function(id){
	
	$.get(CONTEXT_PATH+"taskDetailStuView/ajaxTaskMainDetail?id="+id, function(data) {
		if(data.status=="success"){
			// console.log(data)
			$("#deadline-box").show();
			$("#answer-status-box").show();
			$("#status-box").show();
			$(".submit-info").show();
			$("#teacher-comment-box").show();
			$("#idKey").val(data.data.view.submitResult.id);
			initTaskDetail(data.data.view);
		}else{
			alert(data.message);
		}
	});
}
// console.log(downUrl)
var getTaskInLessonDetail = function(id){
	
	$.get(CONTEXT_PATH+"taskDetailStuView/ajaxTaskInLessonDetail?id="+id, function(data) {
		if(data.status=="success"){
			
			$("#deadline-box").hide();			
			$("#answer-status-box").hide();
			$("#status-box").hide();
			$(".submit-info").hide();
			$("#teacher-comment-box").hide();
			if(data.data.isScore == "NO"){
				$(".correct-info").hide();
				$("#no-correct").show();
			}else if(data.data.isScore == "YES"){
				$(".correct-info").show();
				$("#teacher-score").text(data.data.mark);				
				$("#no-correct").hide();
			}
			initTaskDetail(data.data.view);
		}else{
			alert(data.message);
		}
	});
}

var getTaskPersonalDetail = function(id){
	
	$.get(CONTEXT_PATH+"taskDetailStuView/ajaxTaskPersonalDetail?id="+id, function(data) {
		if(data.status=="success"){
			$("#deadline-box").hide();
			$("#answer-status-box").show();
			$("#status-box").show();
			$(".submit-info").show();
			$("#teacher-comment-box").show();
			$("#idKey").val(data.data.view.submitResult.id);
			initTaskDetail(data.data.view);
		}else{
			alert(data.message);
		}
	});
}

var info;
var initTaskDetail = function(view){
	// console.log(view)
	info = view;
	if(view.canntSubmit == "YES"){
		
		$("#task-submit-btn").hide();
		$("#up-file-btn").hide();
		if(view.type != "ASKINLESSON" && view.submitResult.status!="HAVEREAD"){
			$("#canntSubmit").show();
			$("#canntSubmit").html("<p>已超过截止时间</p>");
		}else if(view.type != "ASKINLESSON" && view.submitResult.status =="HAVEREAD"){
			$("#canntSubmit").show();
			$("#canntSubmit").html("<p>作业已被批改</p>");
		}else{
			$("#canntSubmit").hide();
		}
	}else{
		$("#task-submit-btn").show();
		$("#up-file-btn").show();
		$("#canntSubmit").hide();
	}
	
	if(view.title == null){
		$("#title").text("标题为空");
	}else{
		$("#title").text(view.title);
	}
	
	if(view.type == null){
		$("#type").text("<类型未知>");
	}else{
		$("#type").text("<"+getTaskType(view.type)+">");
	}
	if(view.type == "PERSONALTASK"){
		if(view.submitResult.isAnswerShow=="YES"){
			$("#answer-is-visible").text("答案已公布");
		}else if(view.submitResult.isAnswerShow=="NO"){
			$("#answer-is-visible").text("答案未公布");
		}else{
			$("#answer-is-visible").text("答案公布状态获取失败");
		}
	}else{
		if(view.isAnswerVisible == "YES"){
			$("#answer-is-visible").text("答案已公布");
		}else if(view.isAnswerVisible == "NO"){
			$("#answer-is-visible").text("答案未公布");
		}else{
			$("#answer-is-visible").text("答案公布状态获取失败");
		}
	}
	
	if(view.deadline == null){
		$("#deadline").text("未设置截止日期");
	}else{
		$("#deadline").text(view.deadline);
	}
	
	if(view.description == null || view.description == "" || view.description == "<p><br></p>"){
		$("#description").html("未提供描述");
	}else{
		$("#description").html(view.description);
	}
	
	var attachList=$("#attachList");
	attachList.empty();
 	if(view.attachment.files.length <= 0 ){
		var s="<li>未包含附件</li>";
		attachList.append(s);
	}else{
		for(var i=0;i<view.attachment.files.length;i++){
			var item=view.attachment.files[i];
			var s="<li>";
			s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
			s+="<span class=\"file-upload-stu\"><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></span>";
			s+="</li>";
			attachList.append(s);
		}
	}
	
	if(view.type=="ASKINLESSON") {
		if(view.isAnswerVisible=="YES"){
			$("#answer-box").show();
			isDetailNull(view.standardAnswer,$("#standard-answer"),$("#standardAnswer"));
			var answerAttachList=$("#answerAttachList");
			answerAttachList.empty();
			if(view.attachment.files.length <= 0){
				var s="<li>未包含附件</li>";
				answerAttachList.append(s);
			}else{
				for(var i=0;i<view.attachment.files.length;i++){
					var item=view.attachment.files[i];
					var s="<li>";
					s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
					s+="<span class=\"file-upload-stu\"><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></span>";
					s+="</li>";
					answerAttachList.append(s);
				}
			}
			
		} else {
			$("#answer-box").hide();
		}
	} else if(view.type=="PERSONALTASK") {
		if(view.submitResult.isAnswerShow=="YES"){
			$("#answer-box").show();
			isDetailNull(view.standardAnswer,$("#standard-answer"),$("#standardAnswer"));
			var answerAttachList=$("#answerAttachList");
			answerAttachList.empty();
			if(view.answerAttachment.files.length <= 0){
				var s="<li>未包含附件</li>";
				answerAttachList.append(s);
			}else{
				for(var i=0;i<view.answerAttachment.files.length;i++){
					var item=view.answerAttachment.files[i];
					var s="<li>";
					s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
					s+="<span class=\"file-upload-stu\"><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></span>";
					s+="</li>";
					answerAttachList.append(s);
				}
			}			
		} else {
			$("#answer-box").hide();
		}
	} else {
		if(view.isAnswerVisible=="YES"){
			$("#answer-box").show();
			isDetailNull(view.standardAnswer,$("#standard-answer"),$("#standardAnswer"));
			var answerAttachList=$("#answerAttachList");
			answerAttachList.empty();
			if(view.answerAttachment.files.length <= 0){
				var s="<li>未包含附件</li>";
				answerAttachList.append(s);
			}else{
				for(var i=0;i<view.answerAttachment.files.length;i++){
					var item=view.answerAttachment.files[i];
					var s="<li>";
					s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
					s+="<span class=\"file-upload-stu\"><a href=\"<c:url value='/resource/download/"+item.url+"'/>\">下载</a></span>";
					s+="</li>";
					answerAttachList.append(s);
				}
			}
			
		} else {
			$("#answer-box").hide();
		}
	}
	
	if(view.type!="ASKINLESSON"){
		if(view.submitResult.status == null){
			$("#taskStatus").text("暂无状态信息");
		}else{
			$("#taskStatus").text("任务"+getStatus(view.submitResult.status));
		}
		$("#my-answer").html("<label>我的答案</label><div id=\"submitDetail\"></div>");
		if(view.submitResult.status=="COMMITTED"){
			if($("#canntSubmit").is(":hidden")){
				initEdit();
			}			
			$('input[id="up-file-btn"]').val("重新上传附件");
			//isDetailNull(view.submitResult.detail,$("#my-answer"),$("#submitDetail"));
			$("#submitDetail").html(view.submitResult.detail);
			var submitList=$("#stu-submit-file-list");
			submitList.empty();
			if(view.submitResult.resultAttachment.files.length <= 0){
				var s = "<li>未提交附件</li>";
				submitList.append(s);
			}else{
				for(var i=0;i<view.submitResult.resultAttachment.files.length;i++){
					var item=view.submitResult.resultAttachment.files[i];
					let name = item.name+info.taskId
					let downKey = localStorage.getItem(name);
					var s="<li>";
					s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
					s+="<span class=\"file-upload-stu\"><a href=\"<c:url value='/resource/download/"+downKey+"'/>\">下载</a></span>"
					<%--s+= ("<a id=\"download-url\" href=\"<c:url value='/resource/download/"+"'/>\">下载</a>");--%>
					s+="<span class=\"file-upload-stu\"></span>";
					s+="</li>";
					submitList.append(s);
				}
			}		
			$(".correct-info").hide();
			$("#no-correct").show();
			$("#deadline-box").hide();
		} else if(view.submitResult.status=="UNCOMMITTED") {
			if($("#canntSubmit").is(":hidden")){
				initEdit();
			}
			$(".correct-info").hide();
			$("#no-correct").hide();
			$("#deadline-box").show();
			var submitList=$("#stu-submit-file-list");
			submitList.empty();
			$("#submitDetail").html("<p><br></p>");
		} else if(view.submitResult.status=="HAVEREAD"){
			isDetailNull(view.submitResult.detail,$("#my-answer"),$("#submitDetail"));
			var submitList=$("#stu-submit-file-list");
			submitList.empty();
			if(view.submitResult.resultAttachment.files.length <= 0){
				var s="<li>未提交附件</li>";
				submitList.append(s);
			}else{
				for(var i=0;i<view.submitResult.resultAttachment.files.length;i++){
					var item=view.submitResult.resultAttachment.files[i];

					var s="<li>";
					s+="<span class=\"file-name-date\" title=\""+item.name+"\">"+item.name+"</span>";
					<%--s+= ("<a id=\"download-url\" href=\"<c:url value='/resource/download/"+list[i].url+"'/>\">下载</a>");--%>
					s+="<span class=\"file-upload-stu\"></span>";
					s+="</li>";
					submitList.append(s);
				}
			}
			
			$(".correct-info").show();
			$("#teacher-score").text(view.submitResult.score);
			if(view.submitResult.evaluate == "<p><br></p>" || view.submitResult.evaluate == null || view.submitResult.evaluate == ""){
				$("#teacher-comment").html("<p>暂无评论</p>");
			}else{
				$("#teacher-comment").html(view.submitResult.evaluate);
			}
			$("#no-correct").hide();
			$("#deadline-box").hide();
		}
	}

}
var isDetailNull = function(string,element,detailzone){
	if(string.trim() == "<p><br></p>" || string.trim() == null || string.trim() == ""){
		element.hide();
	}else{
		element.show();
		detailzone.html(string);
	}
}

//上传任务附件****待修改
var taskFileListSubmit = function() {
	var list = $("#stu-submit-file-list");
	$.ajaxFileUpload({
		url : CONTEXT_PATH+"resource/upload", //用于文件上传的服务器端请求地址
		secureuri : false, //是否需要安全协议，一般设置为false
		fileElementId : 'task-stu-submit', //文件上传域的ID
		dataType : 'json', //返回值类型 一般设置为json
		success : function(data, status) //服务器成功响应处理函数
		{
			if(data.status=="success"){
				// console.log(data)
				// console.log(info)
				// console.log(sessionStorage)
				let name = data.data.name+info.taskId;
				localStorage.setItem(name, data.data.key);

				var temp ="";
				temp += ("<li>");
				temp += ("<span class=\"file-name-date\" title=\""+data.data.name+"\">" + data.data.name + "</span>");
				temp += ("<input type=\"hidden\" name=\"answerAttachKey\" value=\""+data.data.key+"\" />");
				temp += ("<input type=\"hidden\" name=\"answerAttachName\" value=\""+data.data.name+"\" />");
				temp += ("<span id=\"deleteFile\"class=\"file-upload-stu\">删除</span>");
				temp += ("</li>");
				list.append(temp);
			}else{
 				alert(data.message+"  或者由于以下原因（文件为空文件）若因格式问题，您可以将文件压缩为rar或zip格式！");
			}
		},
		error : function(data, status, e)//服务器响应失败处理函数
		{
// 			alert(e);
		}
	})
}

</script>